<!-- 星级评价组件 -->
<template>
  <div class="star-comment-box">
    <ul class="rating" @mouseleave.self="handleOut">
      <li
        v-for="(item, index) of defaults.stars"
        :key="item.id"
        :class="{
					'rating-item': true,
					'entire-light': index < entireNum,
					'half-light':
						defaults.mode === 'half' && halfNum !== -1 && index === halfNum,
				}"
        :title="item.title"
        @mousemove="handleMove($event, index)"
        @click="handleClick(index)"
      ></li>
    </ul>
    <div class="rating-text" v-if="defaults.showTip">{{ starVlaue }}分</div>
  </div>
</template>

<script>
export default {
  name: 'StarComment',

  components: {},

  props: {
    // 参数，参数的具体内容看defaults
    options: {
      type: Object,
      default: () => {},
    },
  },

  data() {
    return {
      defaults: {
        mode: 'entire', // 模式：半星half、全星entire
        stars: [
          {
            id: 1,
            title: '很差',
            value: 1,
          },
          {
            id: 2,
            title: '差',
            value: 2,
          },
          {
            id: 3,
            title: '一般',
            value: 3,
          },
          {
            id: 4,
            title: '好',
            value: 4,
          },
          {
            id: 5,
            title: '很好',
            value: 5,
          },
        ], // 星星
        lightNum: 2.5, // 默认点亮的颗数
        showTip: false, // 显示提示
        readonly: false, // 是否只读
        once: true, // 是否只能点击一次
      },
      entireNum: 0, // 小于entireNum的点亮全星
      halfNum: -1, // 第halfNum颗点亮半星，-1代表没有半星
      add: 1,
    }
  },

  computed: {
    starVlaue() {
      if (this.halfNum !== -1) {
        return this.entireNum + 0.5
      } else {
        return this.entireNum
      }
    },
  },

  watch: {},

  created() {
    Object.assign(this.defaults, this.options)
    this.lightOn(this.defaults.lightNum)
  },

  mounted() {},

  methods: {
    /* 点亮 */
    lightOn(num) {
      const partInt = num | 0
      this.entireNum = partInt
      if (partInt !== num) this.halfNum = partInt
      else this.halfNum = -1
    },
    /* 鼠标移动事件 */
    handleMove: _.throttle(
      function(e, index) {
        if (this.defaults.readonly) return
        // 先计算有没有半颗星
        if (this.defaults.mode === 'half') {
          const width = e.target.clientWidth
          if (e.offsetX < width / 2) this.add = 0.5
          else this.add = 1
        }
        this.lightOn(index + this.add)
      },
      0,
      { leading: true }
    ),
    /* 鼠标点击事件 */
    handleClick(index) {
      if (this.defaults.readonly) return
      index = index + this.add
      this.defaults.lightNum = index
      this.lightOn(index)
      this.$emit('starClick', index)
      if (this.defaults.once) this.defaults.readonly = true
    },
    /* 鼠标移出事件 */
    handleOut() {
      if (this.defaults.readonly) return
      this.lightOn(this.defaults.lightNum)
    },
  },
}
</script>

<style lang='less' scoped>
.star-comment-box {
  display: flex;
  .rating {
    display: inline-block;
    height: auto;
    list-style: none;

    .rating-item {
      width: 33px;
      height: 34px;
      float: left;
      background: url('~_images/rating.png') no-repeat;
      cursor: pointer;
    }
    .entire-light {
      background-position: 0 -40px;
    }
    .half-light {
      background-position: 0 -80px;
    }
  }
  .rating-text {
    width: 40px;
    height: 34px;
    margin-left: 5px;

    font-size: 16px;
    line-height: 34px;
    text-align: right;
  }
}
</style>
